<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>协议转换</title>
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
    <div class="row" style="margin-top:80px;height:50px">
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a>html转text</a>
            </li>
            <li>
                <a>text转html</a>
            </li>

        </ul>

        <button type="button" class="btn btn-default">转换</button>
      </div>
  </div>

   <div class="row">
      <div id="edit" class="col-sm-6" 
         style="
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;min-height:600px;" contenteditable="true">

      </div>
      
      <div class="col-sm-offset-1 col-sm-5" 
         style="box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;min-height:600px;">
         
      </div>
   </div>
</div>
<script type="text/javascript">
  $(function(){

    var update = function(original){
      var new_content = $('#edit').html();
      
      var new_content = new_content.replace(/class="[^"]+"/ig, '');
      new_content = new_content.replace(/class\="[^"]+"/gi, '');
      new_content = new_content.replace(/<h1.*?>(.*?)<\/h1>/ig,"$1");  
      new_content = new_content.replace(/<h2.*?>(.*?)<\/h2>/ig,"$1");  
      new_content = new_content.replace(/<h3.*?>(.*?)<\/h3>/ig,"$1");  
      new_content = new_content.replace(/<h4.*?>(.*?)<\/h4>/ig,"$1");  
      new_content = new_content.replace(/<h5.*?>(.*?)<\/h5>/ig,"$1");  
      new_content = new_content.replace(/<h6.*?>(.*?)<\/h6>/ig,"$1");  
      new_content = new_content.replace(/style\="[^"]+"/gi, '');
      
      $('#edit').html(new_content);
    } 
   
    $('#edit').bind('paste', function(e){
      var _this = this;
      setTimeout(function() {
        var text = $(_this).html().split('\n').map(function(item){
          return item + '\n';
        }).join('\n');
        
        update(text);
      }, 10);
      
    })

  })

</script>
</body>
</html>